<template>
  <div>
    <!-- 用户信息修改 -->
    <div class="dialog_content">
      <el-form label-position="left" ref="saasuserRef" :rules="saasuserRules" :model="saasuser" label-width="80px" class="dialog_form">
        <el-form-item label="头像">
          <div class="upload_img"><Upload :tempUrl="saasuser.avatar" @input="getLogoImg"></Upload></div>
        </el-form-item>
        <el-form-item :class="Isshow == 1 ? 'form_show' : ''" label="用户名">
          <div class="button-right">
            <div v-if="Isshow == 1"><el-input v-model="saasuser.name" placeholder="请输入新用户名"></el-input></div>
            <div v-else>{{ saasuser.name }}</div>
            <!-- <div class="flex_flex-end">
              <el-button v-if="Isshow == 1" type="primary" size="small" @click="eidtSaasuser">修改</el-button>
              <el-button v-else type="primary" size="small" @click="Isshow = 1">修改</el-button>
              <el-button v-show="Isshow == 1" type="primary" plain size="small" @click="cancel">取消</el-button>
            </div> -->
          </div>
        </el-form-item>
        <el-form-item :class="Isshow == 3 ? 'form_show' : ''" label="手机号" prop="mobile">
          <div class="button-right">
            <div v-if="Isshow == 3"><el-input v-model="saasuser.mobile" placeholder="请输入新手机号"></el-input></div>
            <div v-else>{{ saasuser.mobile }}</div>
            <!-- <div class="flex_flex-end">
              <el-button v-if="Isshow == 3" type="primary" size="small" @click="eidtSaasuser">修改</el-button>
              <el-button v-else type="primary" size="small" @click="Isshow = 3">修改</el-button>
              <el-button v-show="Isshow == 3" type="primary" plain size="small" @click="cancel">取消</el-button>
            </div> -->
          </div>
        </el-form-item>
        <div class="password_box form_show" v-if="Isshow == 2">
          <el-alert title="密码修改" type="info" :closable="false"></el-alert>
          <el-form-item label="旧密码" prop="old_password"><el-input type="password" v-model="saasuser.old_password" placeholder="请输入新旧密码"></el-input></el-form-item>
          <el-form-item label="新密码" prop="password"><el-input type="password" v-model="saasuser.password" placeholder="请输入新密码"></el-input></el-form-item>
          <el-form-item label="确认密码" prop="confirm_password"><el-input type="password" v-model="saasuser.confirm_password" placeholder="再次输入密码"></el-input></el-form-item>
          <el-form-item style="padding:0px 45px">
            <div class="flex_flex-end">
              <el-button type="primary" size="small" @click="eidtPassWord">修改</el-button>
              <el-button type="primary" plain size="small" @click="cancel">取消</el-button>
            </div>
          </el-form-item>
        </div>
        <el-form-item label="登录密码" v-else>
          <div class="button-right">
            ******
            <div class="flex_flex-end"><el-button type="primary" size="small" @click="Isshow = 2">修改</el-button></div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/Upload/SingleImage3';
import {allEditUser} from '@/api/mall/navbar';
// import {editOperationSave, eidtPassWordApi} from '@/api/saasuser/index';
import {getLoginType} from '@/utils/auth';
export default {
  props: {
    saasuser: {
      type: Object
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.saasuser.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      malltoken: false,
      admins: {},
      login_type: '',
      typer: '',
      saasuserRules: {
        password: [{required: true, message: '请输入新密码', trigger: 'blur'}, {min: 4, max: 32, message: '长度在4到32个字符', trigger: 'blur'}],
        old_password: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
        confirm_password: [{required: true, trigger: 'blur'}, {validator: validatePass, trigger: 'blur'}],
        mobile: [
          {
            pattern: /^1[23456789]\d{9}$/,
            message: '请输入正确的号码格式',
            trigger: 'change'
          }
        ]
      },
      isUser: false,
      Isshow: 0
    };
  },
  components: {
    Upload
  },
  created() {
    let type =getLoginType(1);
    let admin = localStorage.getItem('admins');
    this.admins = JSON.parse(admin);
    if (type == 'saas') {
      this.admins.site = '管理平台';
    }

    this.oldSaasuser = JSON.parse(JSON.stringify(this.saasuser));
  },
  methods: {
    tomall() {
      localStorage.setItem('login_type', 'mall');
      this.$router.push({
        path: '/'
      });
    },
    tosaas() {
      localStorage.setItem('login_type', 'saas');
      this.$router.push({
        path: '/'
      });
    },
    goback(type) {
      this.$store
        .dispatch('user/silent_back', {type: type})
        .then(() => {
          this.$router.push({
            path: '/'
          });
        })
        .catch(() => {});
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar');
    },
    // 图片上传
    getLogoImg(data) {
      this.saasuser.avatar = data.tempimg;
      this.eidtSaasuser();
    },
    // 密码修改
    eidtPassWord() {
      let _this = this;
      this.$refs['saasuserRef'].validate(vaild => {
        if (vaild) {
          if (_this.setStater() == 'suser') {
            let data = {
              password: _this.saasuser.old_password,
              save_password: _this.saasuser.password
            };
            eidtPassWordApi(data).then(res => {
              _this.Isshow = 0;
              _this.saasuser.password = '';
              _this.saasuser.old_password = '';
              _this.saasuser.confirm_password = '';
              return _this.$message.success('修改成功');
            });
          } else {
            let data = {
              typer: this.setStater(),
              id: this.saasuser.id,
              ...this.saasuser
            };
            data.password = _this.saasuser.password;
            data.old_password = _this.saasuser.old_password;
            allEditUser(data).then(res => {
              _this.Isshow = 0;
              _this.saasuser.password = '';
              _this.saasuser.old_password = '';
              _this.saasuser.confirm_password = '';
              return _this.$message.success('修改成功');
            });
          }
        }
      });
    },
    // 提交修改
    eidtSaasuser() {
      let data = {
        typer: this.setStater(),
        id: this.saasuser.id,
        ...this.saasuser
      };
      let _this = this;
      this.$refs['saasuserRef'].validate(vaild => {
        if (vaild == true) {
          if (_this.setStater() == 'suser') {
            data.username = data.name;
            data.logo = data.avatar;
            editOperationSave(data).then(res => {
              _this.apiOut();
            });
          } else {
            allEditUser(data).then(res => {
              _this.apiOut();
            });
          }
        }
      });
    },
    //提交api调用完成返回
    apiOut() {
      this.Isshow = 0;
      this.isUser = false;
      if(this.admins){
         delete this.admins.user.password;
      }

      this.$emit('OutData', this.saasuser);
    },
    // 判断登陆平台
    setStater() {
      let url_type = getLoginType(1);
      let that_type = '';
      if (url_type == 'mall') {
        that_type = 'madmin';
      } else if (url_type == 'saas') {
        that_type = 'admin';
      } else if (url_type == 'shop') {
        that_type = 'user';
      } else {
        that_type = 'suser';
      }
      return that_type;
    },
    // 取消修改
    cancel() {
      this.Isshow = 0;
      this.$emit('oldSaasUser', this.oldSaasuser);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog_content {
  width: 100%;
  .dialog_form {
    .password_box {
      padding: 10px 0px;
      .el-form-item {
        margin: 0px;
        padding: 10px 45px;
        transition: all 0.3s;
        .button-right {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .el-form-item {
      margin: 0px;
      padding: 20px 45px;
      transition: all 0.3s;
      .button-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .form_show {
      background: #f3f4f8;
      /deep/ .button-right {
        display: block;
      }
      .flex_flex-end {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        .el-button {
          width: 95px;
        }
      }
    }
  }
}
.disc {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.upload_img {
  width: 120px;
  height: 120px;
}
</style>
